<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { init, dispose } from 'klinecharts'

const chart = ref(null)

onMounted(() => {
  // 创建图表实例并保存引用
  chart.value = init('chart', {
    locale: 'zh-CN',
    i18n: {
      time: '时间',
      open: '开盘',
      high: '最高',
      low: '最低',
      close: '收盘',
      volume: '成交量',
      n_a: '无数据'
    },
    // 添加一些样式配置
    styles: {
      grid: {
        show: true,
        horizontal: {
          show: true,
          size: 1,
          color: '#EDEDED'
        }
      }
    }
  })

  // 数据保持不变...
  chart.value.applyNewData([
    { close: 4976.16, high: 4977.99, low: 4970.12, open: 4972.89, timestamp: 1587660000000, volume: 204 },
    { close: 4977.33, high: 4979.94, low: 4971.34, open: 4973.20, timestamp: 1587660060000, volume: 194 },
    { close: 4977.93, high: 4977.93, low: 4974.20, open: 4976.53, timestamp: 1587660120000, volume: 197 },
    { close: 4966.77, high: 4968.53, low: 4962.20, open: 4963.88, timestamp: 1587660180000, volume: 28 },
    { close: 4961.56, high: 4972.61, low: 4961.28, open: 4961.28, timestamp: 1587660240000, volume: 184 },
    { close: 4964.19, high: 4964.74, low: 4961.42, open: 4961.64, timestamp: 1587660300000, volume: 191 },
    { close: 4968.93, high: 4972.70, low: 4964.55, open: 4966.96, timestamp: 1587660360000, volume: 105 },
    { close: 4979.31, high: 4979.61, low: 4973.99, open: 4977.06, timestamp: 1587660420000, volume: 35 },
    { close: 4977.02, high: 4981.66, low: 4975.14, open: 4981.66, timestamp: 1587660480000, volume: 135 },
    { close: 4985.09, high: 4988.62, low: 4980.30, open: 4986.72, timestamp: 1587660540000, volume: 76 }
  ])
})

onUnmounted(() => {
  if (chart.value) {
    dispose('chart')
    chart.value = null
  }
})
</script>

<template>
  <div class="chart-container">
    <div id="chart"></div>
  </div>
</template>

<style scoped>
.chart-container {
  margin: 30px auto;
  width: 1000px;
  height: 600px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#chart {
  width: 100%;
  height: 100%;
}
</style>